<template>
  <div class="itempanel_content">
    <div
      v-if="item.content.length === 1"
      :key="'content_0'"
      class="itempanel_content_panel"
    >
      <div
        class="itempanel_content_panel_multiple"
        :class="item.isAd ? 'on' : ''"
      >
        <span class="itempanel_content_panel_ad">{{ $t("lang.广告") }}</span>
        <div
          class="itempanel_content_panel_adseller"
          :class="item.goods ? 'on' : ''"
          v-if="item.goods"
        >
          <a :href="item.sellerUrl" target="_blank">
            <span>{{ item.goods.itemName }}</span>
            <i
              :class="
                $store.state.lang === 'zh-CN' ? 'icon-rmb' : 'icon-dollar'
              "
            ></i
            >{{ item.goods.identityPrice
            }}<span class="no"
              ><i
                :class="
                  $store.state.lang === 'zh-CN' ? 'icon-rmb' : 'icon-dollar'
                "
              ></i
              >{{ item.goods.skuPrice }}</span
            >
          </a>
          <i class="icon-arrow-right-bold arrow"></i>
        </div>
        <span class="itempanel_content_panel_adseller" v-else
          ><a :href="item.sellerUrl" target="_blank"
            ><span>{{ $t("lang.点击了解赞助商详情") }}</span
            ><i class="icon-arrow-right-bold"></i></a
        ></span>
        <div
          class="itempanel_content_panel_image_touch"
          @touchstart="imgTouchStartHandle"
          @touchmove="imgTouchMoveHandle"
          @touchend="imgTouchEndHandle"
        >
          <i
            class="icon-favorites-fill icon animate__animated"
            v-if="isGood"
            :class="isGood ? 'animate__bounceIn' : ''"
          ></i>
        </div>
        <img v-lazy="item.content[0].url" />
      </div>
    </div>
    <div v-else class="itempanel_content_panel">
      <van-swipe
        @change="onChange"
        ref="vanSwipe"
        :autoplay="item.isAd ? 3000 : 0"
      >
        <van-swipe-item
          :class="item.isAd ? 'on' : ''"
          v-for="(sitem, index) in item.content"
          :key="'content_' + index"
          class="itempanel_content_panel_multiple"
        >
          <span class="itempanel_content_panel_ad">{{ $t("lang.广告") }}</span>
          <div
            class="itempanel_content_panel_adseller"
            :class="item.goods ? 'on' : ''"
            v-if="item.goods"
          >
            <a :href="item.sellerUrl" target="_blank">
              <span>{{ item.goods.itemName }}</span>
              <i
                :class="
                  $store.state.lang === 'zh-CN' ? 'icon-rmb' : 'icon-dollar'
                "
              ></i
              >{{ item.goods.identityPrice
              }}<span class="no"
                ><i
                  :class="
                    $store.state.lang === 'zh-CN' ? 'icon-rmb' : 'icon-dollar'
                  "
                ></i
                >{{ item.goods.skuPrice }}</span
              >
            </a>
            <i class="icon-arrow-right-bold arrow"></i>
          </div>
          <span class="itempanel_content_panel_adseller" v-else
            ><a :href="item.sellerUrl" target="_blank"
              ><span>{{ $t("lang.点击了解赞助商详情") }}</span
              ><i class="icon-arrow-right-bold"></i></a
          ></span>
          <div
            class="itempanel_content_panel_image_touch"
            @touchstart="imgTouchStartHandle"
            @touchmove="imgTouchMoveHandle"
            @touchend="imgTouchEndHandle"
          >
            <i
              class="icon-favorites-fill icon animate__animated"
              v-if="isGood"
              :class="isGood ? 'animate__bounceIn' : ''"
            ></i>
          </div>
          <img v-lazy="sitem.url" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }} / {{ item.content.length }}
          </div>
        </template>
      </van-swipe>
      <a
        href="javascript:;"
        @click="directClickHandle(-1)"
        class="itempanel_content_panel_directbutton left"
        ><i class="icon-arrow-left-bold"></i
      ></a>
      <a
        href="javascript:;"
        @click="directClickHandle(1)"
        class="itempanel_content_panel_directbutton right"
        ><i class="icon-arrow-right-bold"></i
      ></a>
    </div>
    <ItemPanelTools :item="item" v-if="showTools">
      <div
        class="custom_indicator_aside"
        slot="itempanelToolsLeftCustom"
        v-if="item.content.length > 1"
      >
        <div class="custom_indicator_aside_marks">
          <span
            v-for="(sitem, index) in item.content"
            :key="'indicator_' + index"
            class="custom_indicator_aside_mark"
            :class="current === index ? 'on' : ''"
          ></span>
        </div>
      </div>
    </ItemPanelTools>
    <slot name="customTools" :item="item"></slot>
  </div>
</template>
<script>
export default {
  name: "ItemPanelContent",
  props: {
    showTools: {
      type: Boolean,
      default() {
        return true;
      },
    },
    itemIndex: {
      type: Number,
      default() {
        return 0;
      },
    },
    item: {
      type: Object,
      default() {
        return {
          content: [],
        };
      },
    },
  },
  components: {
    ItemPanelTools: () =>
      import(
        /* webpackChunkName: "itemPanelTools" */ "../../../components/common/itemPanel/itemPanelTools"
      ),
  },
  data() {
    return {
      current: 0,
      start: {},
      end: {},
      deltaX: 0,
      deltaY: 0,
      startTime: 0,
      endTime: 0,
      doubleTime: 0,
      isGood: false,
      timeout: null,
    };
  },
  methods: {
    directClickHandle(v) {
      this.$refs["vanSwipe"][v > 0 ? "next" : "prev"]();
    },
    onChange(index) {
      this.current = index;
    },
    imgTouchStartHandle(e) {
      var touches = e.touches[0];
      this.startTime = new Date();
      this.start = {
        x: touches.pageX,
        y: touches.pageY,
      };
      this.end = {
        x: 0,
        y: 0,
      };
      this.deltaX = 0;
      this.deltaY = 0;
      this.endTime = null;
    },
    imgTouchMoveHandle(e) {
      var touches = e.touches[0];
      this.end = {
        x: touches.pageX,
        y: touches.pageY,
      };
    },
    imgTouchEndHandle(e) {
      this.endTime = new Date();
      this.deltaX = this.end.x - this.start.x;
      this.deltaY = this.end.y - this.start.y;
      if (
        this.deltaX <= 10 &&
        this.deltaY <= 10 &&
        this.endTime - this.startTime > 500
      ) {
        //console.log(e, "singleTap", this.endTime - this.startTime);
        //callback && callback.call(this, e, "singleTap", endTime - startTime);
        this.doubleTime = null;
      } else if (
        this.deltaX <= 10 &&
        this.deltaY <= 10 &&
        this.endTime - this.doubleTime < 500
      ) {
        // console.log(e, "doubleTap", this.endTime - this.doubleTime);
        this.isGood = true;
        this.timeout && clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.isGood = false;
        }, 2000);
        //callback && callback.call(this, e, "doubleTap", endTime - doubleTime);
      } else {
        this.doubleTime = this.endTime;
      }
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.itempanel_content {
  .itempanel_content_panel {
    position: relative;
    overflow: hidden;
    width: 375 / @base;
    background-color: #efefef;
    .itempanel_content_panel_multiple {
      height: 375 / @base;
      &.on {
        height: 414 / @base;
        .itempanel_content_panel_ad {
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          font-size: 12 / @base;
          padding: 2 / @base 5 / @base;
          z-index: 3;
          display: block;
        }
        .itempanel_content_panel_adseller {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: brown;
          font-size: 14 / @base;
          padding: 15 / @base;
          z-index: 3;
          display: block;
          border-bottom: 1 / @base solid #efefef;
          &.on {
            background-color: #fff;
            display: flex;
            a {
              color: #333;
              display: block;
              width: 90%;
              span {
                width: auto;
                display: block;
                &.no {
                  display: inline-block;
                  color: #ccc;
                  text-decoration: line-through;
                  margin: 0 0 0 5 / @base;
                }
              }
              i {
                vertical-align: middle;
                margin: 0;
                width: auto;
              }
            }
            i {
              &.arrow {
                width: 10%;
                line-height: 39 / @base;
                text-align: center;
              }
            }
          }
          a {
            color: #fff;
            display: flex;
            span {
              width: 99%;
            }
            i {
              width: 5%;
              margin: 2 / @base 0 0 5 / @base;
              font-size: 16 / @base;
            }
          }
        }
      }
    }
    .custom-indicator {
      position: absolute;
      right: 10 / @base;
      top: 10 / @base;
      padding: 5 / @base 10 / @base;
      font-size: 12 / @base;
      background: rgba(0, 0, 0, 0.8);
      border-radius: 20 / @base;
      color: #fff;
    }
    .itempanel_content_panel_directbutton {
      position: absolute;
      top: 160 / @base;
      font-size: 24 / @base;
      color: #fff;
      padding: 20 / @base 10 / @base;
      &.left {
        left: 10 / @base;
      }
      &.right {
        right: 10 / @base;
      }
    }
    .itempanel_content_panel_ad {
      display: none;
    }
    .itempanel_content_panel_adseller {
      display: none;
    }
    .itempanel_content_panel_image_touch {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        font-size: 100 / @base;
        color: #fff;
        text-shadow: rgba(0, 0, 0, 0.5) 5 / @base 1 / @base 10 / @base;
      }
    }
    img {
      width: 100%;
    }
  }
  .custom_indicator_aside {
    margin: 10 / @base 0 0;
    width: 140 / @base;
    .custom_indicator_aside_marks {
      width: 40 / @base;
      margin: 0 auto;
      overflow: hidden;
      span {
        &.custom_indicator_aside_mark {
          float: left;
          width: 6 / @base;
          height: 6 / @base;
          border-radius: 20 / @base;
          background-color: #efefef;
          display: block;
          margin: 0 2 / @base;
          &.on {
            background-color: brown;
          }
        }
      }
    }
  }
}
</style>
